<template>
	<view class="lottery">
		<view class="grids" :style="[gridsImage]">
			<!-- #ifdef MP || APP-PLUS -->
			<view :style="{ height: `${getHeight.barTop}px` }"></view>
			<view :style="{ height: `${getHeight.barHeight}px` }"></view>
			<!-- #endif -->
			<view class="grids-content">
				<view v-if="isContent" class="rules-button" @click="rulesShow = true">抽奖规则</view>
				<view class="marquee-wrapper acea-row row-middle" v-if="userList.length">
					<text class="iconfont icon-ic_horn1"></text>
					<view class="marquee-wrapper-content">
						<noticeBar :showMsg="userList"></noticeBar>
					</view>
				</view>
				<view class="grids-box">
					<gridsLottery :isRotating="isRotating" :lotteryNum="lotteryNum" :winingIndex="lottery_draw_param.winingIndex" :prizeData="prizeList" @get_winingIndex='getWiningIndexs'
						@luck_draw_finish='luck_draw_finish'>
					</gridsLottery>
				</view>
				<view class="draw-button" :style="{
				backgroundImage: `url(${imgHost}/statics/images/lottery1.png)`
			}" @click="getWiningIndex">
					<image :src="`${imgHost}/statics/images/lottery3.png`" class="hand"></image>
				</view>
			</view>
		</view>
		<view class="show-box-wrapper">
			<view class="show-box-list">
				<view class="showBox" v-if="userList.length && isAll">
					<showBox :showMsg="{type: 'user',data: userList}"></showBox>
				</view>
				<view class="showBox" v-if="prizeList.length">
					<showBox :showMsg="{type: 'prize',data: prizeList}"></showBox>
				</view>
				<view class="showBox" v-if="myList.length && isPersonal">
					<showBox :showMsg="{type: 'me',data: myList}"></showBox>
				</view>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		<!-- 抽奖规则弹窗 -->
		<view v-if="rulesShow" class="mask" @touchmove.stop.prevent="moveHandle"></view>
		<view class="rules-popup" :class="{ active: rulesShow }" @touchmove.stop.prevent="moveHandle">
			<view class="popup-top acea-row row-center-wrapper">
				<view class="title">抽奖规则</view>
				<text class="iconfont icon-ic_close1" @click="rulesShow = false"></text>
			</view>
			<scroll-view scroll-y="true" class="popup-center">
				<view v-html="htmlData"></view>
			</scroll-view>
			<view class="popup-bottom">
				<view class="button acea-row row-center-wrapper" @click="rulesShow = false">我知道了</view>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		<!-- #ifdef H5 -->
		<view class="followCode" v-if="followCode">
			<view class="pictrue">
				<view class="code-bg"><img class="imgs" :src="codeSrc" /></view>
			</view>
			<view class="mask" @click="closeFollowCode"></view>
		</view>
		<zb-code ref="qrcode" v-show="false" :show="codeShow" :cid="cid" :val="val" :onval="onval" :loadMake="loadMake" @result="qrR" />
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<template v-if="isWeixin">
			<view class="invite-people-wrap">
				<view class="invite-people-inner">
					<view class="invite-people">
						<view class="">邀请好友<text></text></view>
						<view class="invite" @click="$emit('H5Share')">
							去邀请
						</view>
					</view>
					<view class="safe-area-inset-bottom"></view>
				</view>
			</view>
			<view class="invite-people-placeholder"></view>
			<view class="safe-area-inset-bottom"></view>
		</template>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/user.js';
	import zbCode from '@/components/zb-code/zb-code.vue'
	import gridsLottery from '../../components/lottery/index.vue'
	import showBox from '../components/showbox.vue'
	import noticeBar from '../components/noticeBar.vue'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	export default {
		props: {
			type: {
				type: String,
				default: ''
			},
			prizeList: {
				type: Array,
				default () {
					return [];
				}
			},
			userList: {
				type: Array,
				default () {
					return [];
				}
			},
			myList: {
				type: Array,
				default () {
					return [];
				}
			},
			htmlData: {
				type: String,
				default: ''
			},
			isPersonal: {
				type: Number,
				default: 0
			},
			isAll: {
				type: Number,
				default: 0
			},
			isContent: {
				type: Number,
				default: 0
			},
			image: {
				type: String,
				default: ''
			},
			lotteryNum: {
				type: Number,
				default: 0
			},
		},
		components: {
			gridsLottery,
			showBox,
			noticeBar,
			zbCode,
		},
		data() {
			return {
				imgHost: HTTP_REQUEST_URL,
				H5ShareBox: false,
				// #ifdef H5
				isWeixin: this.$wechat.isWeixin(),
				// #endif
				lottery_num: 0,
				lottery_draw_param: {
					startIndex: 3, //开始抽奖位置，从0开始
					totalCount: 3, //一共要转的圈数
					winingIndex: 1, //中奖的位置，从0开始
					speed: 100 //抽奖动画的速度 [数字越大越慢,默认100]
				},
				factor_num: 0,
				id: 0,
				followCode: false,
				//二维码参数
				codeShow: false,
				cid: '1',
				ifShow: true,
				val: "", // 要生成的二维码值
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				codeSrc: "",
				factor: 0,
				rulesShow: false,
				isRotating: false,
				// #ifdef MP || APP-PLUS
				getHeight: this.$util.getWXStatusHeight(),
				// #endif
			}
		},
		computed: {
			gridsImage() {
				return {
					backgroundImage: `url(${this.image})`
				};
			}
		},
		methods: {
			//#ifdef H5
			ShareInfo(data) {
				let href = location.href;
				if (this.$wechat.isWeixin()) {
					getUserInfo().then(res => {
						href = href.indexOf('?') === -1 ? href + '?spid=' + res.data.uid : href + '&spid=' +
							res.data.uid;
						let configAppMessage = {
							desc: data.name,
							title: data.name,
							link: href,
							imgUrl: data.image
						};
						this.$wechat
							.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData',
								'onMenuShareAppMessage',
								'onMenuShareTimeline'
							], configAppMessage)
							.then(res => {})
							.catch(err => {});
					});
				}
			},
			//#endif
			getWiningIndexs(param) {
				this.lottery_draw_param.winingIndex = param.winingIndex;
				this.isRotating = true
			},
			getWiningIndex() {
				this.$emit('getWiningIndex', this.getWiningIndexs);
			},
			// 抽奖完成
			luck_draw_finish(param) {
				this.isRotating = false;
				this.$emit('luck_draw_finish');
			},
			qrR(res) {
				this.codeSrc = res
			},
			moveHandle() {}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #E74435;
	}

	.lottery {
		background-color: #E74435;
		min-height: 100vh;
		padding: 0 0 20rpx 0;

		.mask {
			z-index: 1000;
		}

		.rules-popup {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1001;
			border-radius: 32rpx 32rpx 0 0;
			background-color: #FFFFFF;
			transform: translateY(100%);
			transition: 0.3s;

			&.active {
				transform: translateY(0);
			}

			&::before {
				content: "";
				position: absolute;
				width: 100%;
				height: 280rpx;
				background: linear-gradient(rgba(233, 51, 35, 0.20), rgba(255, 255, 255, 0));
			}

			.popup-top {
				position: relative;
				height: 108rpx;

				.title {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}

				.iconfont {
					position: absolute;
					top: 38rpx;
					right: 34rpx;
					font-size: 34rpx;
					color: #BBBBBB;
				}
			}

			.popup-center {
				height: 972rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
			}

			.popup-bottom {
				padding: 20rpx;

				.button {
					height: 72rpx;
					border-radius: 36rpx;
					background-color: #E93323;
					font-weight: 500;
					font-size: 26rpx;
					color: #FFFFFF;
				}
			}
		}

		.rules-button {
			position: absolute;
			bottom: 1048rpx;
			right: 0;
			width: 52rpx;
			padding: 10rpx 15rpx;
			border-radius: 16rpx 0 0 16rpx;
			background: linear-gradient(90deg, #FF8D8D 0%, #FF3F3F 100%);
			font-weight: 500;
			font-size: 22rpx;
			line-height: 30rpx;
			color: #FFFFFF;
		}

		.lottery-header {
			width: 100%;
			height: 580rpx;
			margin: 0;
		}

		.grids {
			background-position: left bottom;
			background-repeat: no-repeat;
			background-size: 100%;

			.grids-content {
				position: relative;
				height: 1212rpx;
			}

			.grids-box {
				position: absolute;
				bottom: 278rpx;
				left: 50%;
				width: 540rpx;
				height: 540rpx;
				transform: translateX(-50%);
			}

			.grids-top {
				display: flex;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.grids-title {
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 20px;
					color: #fff;
					z-index: 999;
					padding: 0 14rpx;

					.grids-frequency {
						color: #FFD68E;
					}
				}
			}

			.marquee-wrapper {
				position: absolute;
				bottom: 876rpx;
				left: 50%;
				transform: translateX(-50%);
        width: 540rpx;
				height: 62rpx;
				padding: 0 32rpx;

				.iconfont {
					margin-right: 16rpx;
					font-size: 32rpx;
					color: #FFEF6C;
				}

				.marquee-wrapper-content {
					flex: 1;
					min-width: 0;
				}
			}
		}

		.invite-people-placeholder {
			height: 120rpx;
		}

		.invite-people-wrap {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 2;
			background-color: #FFFFFF;
		}

		.invite-people-inner {
			background-color: rgba(233, 51, 35, 0.1);
		}

		.invite-people {
			padding: 28rpx 32rpx 28rpx 150rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-image: url();
			background-position: 32rpx center;
			background-repeat: no-repeat;
			background-size: 102rpx;

			.invite {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 136rpx;
				height: 64rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;
				background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(138, 0, 0, 0.2726);
				border-radius: 32rpx;
			}
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 9;
	}

	.share-box {
		z-index: 1300;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.followCode {
		.pictrue {
			width: 500rpx;
			height: 530rpx;
			border-radius: 12px;
			left: 50%;
			top: 50%;
			margin-left: -250rpx;
			margin-top: -360rpx;
			position: fixed;
			z-index: 10000;

			.code-bg {
				display: flex;
				justify-content: center;
				width: 100%;
				height: 100%;
				background-image: url('~@/static/images/code-bg.png');
				background-size: 100% 100%;
			}

			.imgs {
				width: 310rpx;
				height: 310rpx;
				margin-top: 92rpx;
			}
		}

		.mask {
			z-index: 9999;
		}
	}

	.no-lottery {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		color: #ccc;
	}

	[v-cloak] {
		display: none;
	}

	.draw-button {
		position: absolute;
		bottom: 52rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 470rpx;
		height: 141rpx;
		background-size: 100% 100%;

		.hand {
			position: absolute;
			top: -20rpx;
			right: -20rpx;
			width: 220rpx;
			height: 242rpx;
		}
	}

	.show-box-wrapper {
		padding: 20rpx;
		background-color: #EC4545;
	}

	.show-box-list {
		padding: 30rpx 20rpx;
		border-radius: 24rpx;
		background: #E23B1F;
		box-shadow: inset 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.5);

		.showBox+.showBox {
			margin-top: 60rpx;
		}
	}

	.table .table-head .nickname {
		width: 20%;
	}
</style>